<template>
<!-- 疾病树维护 -->
  <div>
    <!-- 疾病树维护 -->
    <div class="policy-main circulationInfo" >
      <div class="base-mian-cell-title mt clearfix">
        <div class="left fl">
          <i></i>
          <span class="tips">疾病树维护</span>
        </div>
      </div>

      <!-- 操作按钮 -->
      <el-row style="margin-top: 15px;margin-left: 10px;">
        <el-col :span="24" class="pb15 pt5">
          <el-button
            :disabled="!this.checkeData"
            type="danger"
            size="mini"
            style="margin-left: 10px"
            plain
            @click="addClassify()"
            >新增分类
          </el-button>
          <el-button
            :disabled="!this.checkeData || this.checkeData.sign == 9999"
            type="danger"
            size="mini"
            style="margin-left: 10px"
            plain
            @click="addIllness()"
            >新增疾病
          </el-button>
          <el-button
            :disabled="!this.checkeData || this.checkeData.sign == 9999"
            type="primary"
            size="mini"
            style="margin-left: 10px"
            plain
            @click="edit()"
            >修改
          </el-button>
          <el-button
            :disabled="!this.checkeData || this.checkeData.sign == 9999"
            type="primary"
            size="mini"
            style="margin-left: 10px"
            plain
            @click="del()"
            >删除
          </el-button>
        </el-col>
      </el-row>


      <!--基本信息列表  -->
      <div class="costbox">
        <div class="colsty">
          <el-tree :data="data" :indent="25" :props="defaultProps" :default-expand-all="true" :expand-on-click-node="false" highlight-current @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{{ data.sign === 2 ? data.diseaseName : data.categoryName }}<span v-if="data.isValid || data.isValid === 0" :class="['tree-type',{'tree-type_danger':data.isValid === 0}]">{{data.isValid === 1 ? '有效':'无效'}}</span></span>
            </span>
          </el-tree>
        </div>   
      </div>
    </div>

    <!-- 分类弹窗 -->
    <el-dialog
      :title="handleType == 'add'?'新增疾病分类':'编辑疾病分类'"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="60%"
      center
      class="dialog"
      >
      <el-form ref="form" :model="form" label-width="150px" :rules="rules" style="overflow: hidden">
        <el-col :span="12" class="common-box">
          <el-form-item label="分类编号：" prop="categoryCode">
            <el-input :disabled="handleType == 'edit'" v-model="form.categoryCode" placeholder="请输入分类编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="common-box">
          <el-form-item label="父分类编号：">
            <el-input disabled v-model="form.parentCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="common-box">
          <el-form-item label="疾病分类名称：" prop="categoryName">
            <el-input v-model="form.categoryName" placeholder="请输入疾病分类名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="common-box">
          <el-form-item label="是否有效：">
            <el-switch class="tableScopeSwitch" inactive-color="#c0c0c0" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" v-model="form.isValid"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="common-box">
          <el-form-item label="备注：">
            <el-input type="textarea" :rows="3" v-model="form.categoryRemark" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="config">保 存</el-button>
        <el-button @click="reset">取 消</el-button>
      </span>
    </el-dialog>

    <!-- 疾病弹窗 -->
    <el-dialog
      :title="handleType == 'add'?'新增疾病':'编辑疾病'"
      :visible.sync="illnessVisible"
      v-if="illnessVisible"
      :close-on-click-modal="false"
      :modal-append-to-body="false"
      width="60%"
      center
      class="dialog"
      >
      <el-form ref="illnessForm" :model="illnessForm" label-width="150px" :rules="illnessRules" style="overflow: hidden">
        <el-col :span="12" class="common-box">
          <el-form-item label="疾病编号：" prop="diseaseCode">
            <el-input :disabled="handleType == 'edit'" v-model="illnessForm.diseaseCode" placeholder="请输入疾病编号"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="common-box">
          <el-form-item label="疾病分类：">
            <el-input disabled v-model="illnessForm.categoryName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="common-box">
          <el-form-item label="疾病名称：" prop="diseaseName">
            <el-input v-model="illnessForm.diseaseName" placeholder="请输入疾病名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="common-box">
          <el-form-item label="是否有效：">
            <el-switch class="tableScopeSwitch" inactive-color="#c0c0c0" :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" v-model="illnessForm.isValid"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="common-box">
          <el-form-item label="备注：">
            <el-input type="textarea" :rows="3" v-model="illnessForm.remark" placeholder="请输入备注"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="illnessSave">保 存</el-button>
        <el-button @click="illnessReset">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {getIllnessTreeApi,insertOrUpdateCategoryApi,insertOrUpdateDiseaseApi,removeCategoryApi,removeDiseaseApi} from "@/api/setting/maintain/illnessMaintenance"; //调接口
export default {
  data() {
    return {
      data: [{
        categoryName: '疾病树',
        sign: 9999,
        children: []
      }],
      defaultProps: {
        children: 'children',
      },

      checkeData: null,  //选中的节点数据
      handleType: 'add',  //操作类型：新增/编辑

      // 分类
      dialogVisible: false,
      form: {
        categoryCode: '',
        parentCode: '',
        categoryName: '',
        isValid: 1,
        categoryRemark: '',
      },
      rules: {
        categoryCode: [
          { required: true, message: '请输入分类编号', trigger: 'blur' },
        ],
        categoryName: [
          { required: true, message: '请输入疾病分类名称', trigger: 'blur' }
        ],
      },

      // 疾病
      illnessVisible: false,
      illnessForm: {
        diseaseCode: '',
        diseaseName:'',
        categoryCode: '',
        categoryName: '',
        isValid: 1,
        remark: ''
      },

      illnessRules: {
        diseaseCode: [
          { required: true, message: '请输入疾病编号', trigger: 'blur' },
        ],
        diseaseName: [
          { required: true, message: '请输入疾病名称', trigger: 'blur' }
        ],
      },
      
    }
    
  },
  mounted(){
    this.getTree()
  }, 
  methods: {
    handleNodeClick(data,node,el) {
      this.checkeData = data
      console.log(this.checkeData,'this.checkeData');
    },
    setTreeBorder(){
      document.querySelectorAll('.create-divel').forEach(item=>{
        item.remove();
      })
      document.querySelectorAll('.el-tree-node__content').forEach(item=>{
        let divEl = document.createElement('div')
        divEl.classList.add("create-divel");
        divEl.style.position = 'absolute'
        divEl.style.height = '100%'
        divEl.style.top = '0'
        divEl.style.borderLeft = '1px dashed #ccc'
        divEl.style.left = parseInt(item.style.paddingLeft) + 12 +'px'
        if(item.nextSibling.nodeType==1) {
          item.nextSibling.appendChild(divEl)
          item.nextSibling.style.position = 'relative'
        }
      })
    },

    addClassify(){
      if(this.checkeData.sign == 2) {
        this.$message.error('不能在疾病下新增分类')
        return
      }
      this.form = {categoryCode: '', parentCode: '', categoryName: '', isValid: 1, categoryRemark: '',}
      if(this.checkeData.categoryCode) this.form.parentCode = this.checkeData.categoryCode
      this.handleType = 'add'
      this.dialogVisible = true
    },
    addIllness(){
      if(this.checkeData.sign == 2) {
        this.$message.error('请在分类下新增疾病')
        return
      }
      this.illnessForm = {diseaseCode: '', diseaseName:'', categoryCode: this.checkeData.categoryCode, categoryName: this.checkeData.categoryName, isValid: 1,remark:''}
      this.handleType = 'add'
      this.illnessVisible = true
    },
    reset(){
      this.dialogVisible = false
    },
    config(){
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.$store.dispatch("loading/CHANGE_LOADING", true);
          insertOrUpdateCategoryApi(this.form).then((res) => {
            this.$store.dispatch("loading/CHANGE_LOADING", false);
            if (res.resultCode === 0) {
              this.$message.success('保存成功')
              this.getTree()
              this.reset()
            }
          })
        } else {
          return false;
        }
      });
    },

    illnessSave(){
      this.$refs['illnessForm'].validate((valid) => {
        if (valid) {
          this.$store.dispatch("loading/CHANGE_LOADING", true);
          insertOrUpdateDiseaseApi(this.illnessForm).then((res) => {
            this.$store.dispatch("loading/CHANGE_LOADING", false);
            if (res.resultCode === 0) {
              this.$message.success('保存成功')
              this.getTree()
              this.illnessReset()
            }
          })
        } else {
          return false;
        }
      });
    },
    illnessReset(){
      this.illnessVisible = false
    },

    edit(){  //编辑
      this.handleType = 'edit'
      if(this.checkeData.sign == 2){
        this.illnessForm = JSON.parse(JSON.stringify(this.checkeData))
        this.illnessVisible = true
      }
      if(this.checkeData.sign == 1){
        this.form = JSON.parse(JSON.stringify(this.checkeData))
        this.dialogVisible = true
      }
    },
    // 删除
    del(){
      // sign: 1 分类；2疾病
      if(this.checkeData.sign == 1){
        this.$confirm('是否删除此分类?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeCategoryApi({id:this.checkeData.id,categoryCode:this.checkeData.categoryCode}).then((res) => {
            this.$store.dispatch("loading/CHANGE_LOADING", false);
            if (res.resultCode === 0) {
              // 每次手动关闭所有弹框
              this.$message.closeAll()
              this.$message.success('删除成功')
              this.getTree()
            }
          }).catch((err) => {
            this.$store.dispatch("loading/CHANGE_LOADING", false);
          });
        })
      }else if(this.checkeData.sign == 2){
        this.$confirm('是否删除此疾病?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          removeDiseaseApi({id:this.checkeData.id,diseaseCode:this.checkeData.diseaseCode}).then((res) => {
            this.$store.dispatch("loading/CHANGE_LOADING", false);
            if (res.resultCode === 0) {
              // 每次手动关闭所有弹框
              this.$message.closeAll()
              this.$message.success('删除成功')
              this.getTree()
            }
          }).catch((err) => {
            this.$store.dispatch("loading/CHANGE_LOADING", false);
          });
        })
      }
    },
    // 获取疾病树数据
    getTree(){
      this.$store.dispatch("loading/CHANGE_LOADING", true);
      getIllnessTreeApi({}).then((res) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
        if (res.resultCode === 0) {
          this.checkeData = null
          this.data = [{categoryName: '疾病树',sign: 9999,children: []}]
          if(res.data && res.data.length) this.data[0].children = res.data
        }
        this.$nextTick(()=>{
          this.setTreeBorder()
        })
      }).catch((err) => {
        this.$store.dispatch("loading/CHANGE_LOADING", false);
      });
    },
   
  },
};
</script>

<style lang = "less" scoped>
.policy-main {
  background: #fff;
  .base-mian-cell-title {
    margin: 0px 20px;
    padding: 0 20px;
    height: 48px;
    line-height: 48px;
    border-bottom: 1px solid #e1e1e1;
    overflow: hidden;
    .left {
      .line {
        color: #f76767;
        float: left;
      }
      .tips {
        margin-left: 10px;
        font-weight: bold;
        float: left;
      }
      i{
        width: 2px;
        height: 16px;
        float: left;
        background: red;
        margin-top: 17px;
      }
      .input{
        display: inline-block;
        border:1px solid #e1e1e1;
        line-height: 36px;
        background-color: #fff;
        margin: 0 20px;
        width: 200px;
        padding-left: 15px;
      }
      .el-input {
        /* width: 50%; */
        margin-left: 20px;
        .el-input__inner {
          height: 34px;
          width: 180%;
        }
      }
    }
    .right {
      padding: 0 10px;
      cursor: pointer;
      .el-icon-arrow-down {
        color: #999;
        font-size: 24px;
        line-height: 48px;
      }
      .transform {
        transform: rotate(270deg);
      }
    }
  }

  .base-mian-cell-title:nth-last-of-type(1){
    background-color: #fff;
    border: 1px solid #f4f4f4;
    /* .tips{
      color: #606266;
      font-weight: normal;
    } */
  }
  .mt{
    margin-top: 0px;
  }

}

/deep/.el-table thead tr:nth-of-type(2){
  display: none;
}

.costbox{
    margin: 10px 30px 0 30px;
    padding-bottom: 15px;
    .colsty{
      border: 1px solid #ccc;
      border-radius: 5px;
      /* min-height: 43vh;
      overflow: hidden;*/
      min-height: 43vh;
       height: calc(100vh - 335px);
       overflow: auto;
    }
  }

  .tree-type{
    display: inline-block;
    width: 32px;
    background: #68a3fc;
    height: 18px;
    color: #fff;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
    border-radius: 2px;
    margin-left: 10px;
  }
  .tree-type_danger{
    background: #f76767;
  }

  /deep/ .col-reset .el-form-item__label{
    width: 85px !important;
    text-align: left !important;
  }
  /deep/ .col-reset .el-form-item__content{
    margin-left: 82px !important;
  }


/deep/ .tableScopeSwitch .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
}
/*打开时文字位置设置*/
/deep/ .tableScopeSwitch .el-switch__label--right {
    z-index: 1;
    right: -10px;
}
/*关闭时文字位置设置*/
/deep/ .tableScopeSwitch .el-switch__label--left {
    z-index: 1;
    left: 20px;
}
/*显示文字*/
/deep/ .tableScopeSwitch .el-switch__label.is-active {
    display: block;
}
/deep/ .tableScopeSwitch.el-switch .el-switch__core,
/deep/ .el-switch .el-switch__label {
    width: 50px !important;    /*开关按钮的宽度大小*/
}

/deep/ .dialog .el-dialog{
  min-width: 570px;
}

/deep/ .el-tree{
  background: #fff !important;
}

/deep/ .el-tree .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
/deep/ .el-tree .el-icon-caret-right:before {
  content: "+";
  width: 10px;
  height: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
}
/deep/ .el-tree .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
  content: "-";
  width: 10px;
  height: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ccc;
}
/deep/ .el-tree .is-leaf:before{
  border: none;
}
</style>